.. |Top_ic| image:: Img/Top_ic.png
.. |Left_ic| image:: Img/Left_ic.png
.. |list_ic| image:: Img/list_ic.png


##################################
Руководство по работе с сайдбаром
##################################

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Назначение и общий функционал сайдбара
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

**Сайдбар** - это закрепленная панель в интерфейсе Системы, содержащая элементы управления и навигации в Системе.

Сайдбар может отображать различные виды информации. Например, он может использоваться для размещения новостных материалов и строки поиска.

Элемент интерфейса «Сайдбар» применяется в Системе в качестве бокового левого (:numref:`4Pic1`) или верхнего горизонтального меню (:numref:`4Pic2`).

.. _4Pic1:          
.. figure:: Img/Left_sidebar.png
       :scale: 80 %
       :align: center

       *Пример бокового левого сайдбара*

.. _4Pic2:          
.. figure:: Img/Top_sidebar.png
       :scale: 80 %
       :align: center

       *Пример верхнего горизонтального сайдбара*

Переключение между боковым левым и верхним горизонтальным сайдбарами выполняется по кнопкам |Top_ic| и |Left_ic| соответственно (:numref:`4Pic1`, :numref:`4Pic2`).

.. note:: Название пунктов меню конкретного экземпляра сайдбара (как бокового, так и верхнего) и расположение этих пунктов требуется уточнить у Администратора или в документации на Систему, так как они могут отличаться в зависимости от настроек Системы.

.. _Структура левого сайдбара:

~~~~~~~~~~~~~~~~~~~~~~~~~~
Структура левого сайдбара
~~~~~~~~~~~~~~~~~~~~~~~~~~

Сайдбар имеет три уровням вложенности (:numref:`4Pic3`):

На первом уровне располагаются главные (верхние) пункты меню сайдбара.

Второй уровень соответствует подпунктам меню сайдбара. На третьем уровне располагаются конечные пункты меню сайдбара (:numref:`4Pic1`).

.. _4Pic3:          
.. figure:: Img/Sidebar_examp.png
       :scale: 80 %
       :align: center

       *Пример левого сайдбара*

**Как открыть страницу с приложением**

Переход к нужной странице Системы происходит при клике по конечным пунктам сайдбара. 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Структура верхнего сайдбара
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Переключение между боковым левым и верхним горизонтальным сайдбарами выполняется по кнопкам |Top_ic| и |Left_ic| соответственно (:numref:`4Pic1`, :numref:`4Pic2`).

Верхний сайдбар имеет два уровня вложенности. Если у пункта меню верхнего сайдбара есть подпункты, то они отображаются при наведении 
курсора на этот пункт. Справа от названия самого пункта расположен знак раскрывающегося списка |list_ic| (:numref:`4Pic4`). 


.. _4Pic4:          
.. figure:: Img/Top_sidebar1.png
       :scale: 80 %
       :align: center

       *Пример верхнего сайдбара*

**Как открыть страницу с приложением**

Переход к нужной странице Системы происходит при клике по конечным пунктам сайдбара. 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Работа с сайдбаром на мобильных устройствах
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

В мобильной версии Системы верхний сайдбар отсутствует, а левый сайдбар скрыт. 
Левый сайдбар открывается по кнопке |Left_ic| в верхней части Системы (:numref:`4Pic5`).

.. _4Pic5:          
.. figure:: Img/Mob_sidebar.png
       :scale: 80 %
       :align: center

       *Кнопка отображения сайдбара в мобильной версии Системы*

При нажатии на эту кнопку левый сайдбар появляется поверх рабочей области Системы (:numref:`4Pic6`). 

.. _4Pic6:          
.. figure:: Img/Mob_sidebar1.png
       :scale: 80 %
       :align: center

       *Пример сайдбара в мобильной версии Системы*

Структуру левого сайдбара см. здесь :ref:`Структура левого сайдбара`.

Скрывается сайдбар кликом по свободному месту Системы.